<template>
  <div class="remit">
    <div class="nav">
      <el-button type="primary" style="width:100px;">待打款</el-button>
      <el-button @click="$router.push('/refund-trade/remitted')" style="width:100px;">已打款</el-button>
    </div>

    <div class="top">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark">
            <el-input placeholder="订单号" v-model="orderNum" size="mini" style="width: 255px">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>

        <el-col :span="8" :push="10">
          <div class="grid-content bg-purple-dark">
            <span style="color:#333333;font-size:12px">下单时间：</span>
            <el-date-picker
              v-model="beginTime"
              type="date"
              size="mini"
              placeholder="选择日期">
            </el-date-picker>
            <span>—</span>
            <el-date-picker
              v-model="endTime"
              type="date"
              size="mini"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>

        <el-col :span="1" :push="10">
          <div class="grid-content bg-purple-dark">
            <!-- <el-button type="primary" size="small">导出</el-button> -->
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="orderMsg">
      <el-table
        :data="tableData"
        border
        height="650px"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="orderNum"
          label="订单号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="RefundTime"
          label="同意打款时间"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundWay"
          label="打款方式">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundAccound"
          label="打款账号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundName"
          label="认证姓名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundMoney"
          label="金额">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <el-button
            type="primary"
            size="mini"
            style="width:70px;"
            @click="centerDialogVisible=true">
            打款
          </el-button>
          <el-button type="info" size="mini" style="width:70px;">取消</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        background
        :page-size="10"
        layout="total, prev, pager, next"
        :total="100">
      </el-pagination>
    </div>
    <div class="evidence">
      <el-dialog
        title="上传凭证"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :visible.sync="centerDialogVisible"
        width="40%"
        @close="close">
        <div class="content">
          <el-row>
            <el-col :span="3">
              <div
                class="grid-content bg-purple-dark"
                style="color:#101010;font-size: 14px;">
                上传凭证：
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-dark">
                <div class="img">
                  <i class="el-icon-picture"></i>
                  <label for="evImg" class="label"></label>
                  <input id="evImg" type="file" @change="getImg($event)">
                  <img :src="evidenceImg" alt="">
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Remit',
  data() {
    return {
      orderNum: '',
      beginTime: '',
      endTime: '',
      tableData: [
        {
          orderNum: '265465123451',
          RefundTime: '65621683512651',
          refundWay: '65621683512651',
          refundAccound: '65621683512651',
          refundName: '65621683512651',
          refundMoney: '65621683512651'
        }
      ],
      centerDialogVisible: false,
      evidenceImg: ''
    }
  },
  methods: {
    getImg(e) {
      const that = this;
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        if (/image/.test(this.result)) {
          that.evidenceImg = this.result
        } else {
          alert('格式不正确，请上传图片格式');
        }
      }
    },
    close() {
      this.evidenceImg = '';
    },
    save() {
      this.centerDialogVisible = false;
      this.evidenceImg = '';
    }
  }
}
</script>

<style lang="scss" scoped>
  .remit{
    margin:20px 0 0 20px;
    .nav{
      margin-top:20px;
    }
    .top{
      margin-top:20px;
    }
    .orderMsg{
      width:99%;
      margin-top:20px;
    }
    .paging{
      float:right;
      margin-top:20px;
    }
    .evidence{
      .content{
        margin:40px 0 0 100px;
        .img{
          position:relative;
          width: 370px;
          height: 278px;
          text-align: center;
          line-height: 278px;
          background-color: #eeeeee;
          .el-icon-picture{
            font-size:30px;
            color: #8c939d;
          }
          .label{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:100;
          }
          input{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity:0;
          }
          img{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
          }
        }
      }
    }
  }
</style>
